<template>
	<view>
		<view class="login" v-if="loginInfo.length">
			<view class="shopShow" v-if="shopList.length">
				<uni-shop-item :shopList="shopList" :loginInfo="loginInfo" :showList="showList" :getTotal="getTotal" @demo='getTotal()'></uni-shop-item>
				<view class="bottomBtn">
					<view class="totalPrice">总价：<text>{{totalPrice}}</text></view>
					<view class="quickBuy" @click="handleBuy">立即购买</view>
				</view>
			</view>
			<view class="shopNull" v-else>
				<image src="../../static/tabbar/shopNull.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="loginNull" v-else>请<navigator url="/pages/login/login">登录</navigator>后查看购物车</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopList:[],
				totalPrice:0,
				loginInfo:"",
				showList:[]
			}
		},
		methods: {
			getTotal(){
				let total = 0
				this.showList.forEach(v=>{
					total+= v.goods_price*v.goods_num
				})
				this.totalPrice = total
			},
			handleBuy(){
				uni.showLoading({
					title:"下单中。。。",
					mask:true
				})
				uni.setStorageSync("buyList",this.showList)
				setTimeout(()=>{
					this.shopList.splice(this.shopList.findIndex(v=>v.loginInfo ==this.loginInfo))
					uni.setStorageSync("shopList",this.shopList)
				//	uni.removeStorageSync("shopList")
					uni.hideLoading()
					uni.navigateTo({
						url:"../buyPage/buyPage"
				 })
				},1500)
			}
		},
		onShow(){
			if(uni.getStorageSync("shopList")){
				this.shopList = uni.getStorageSync("shopList")
			}else{
				this.shopList = []
			}
			if(uni.getStorageSync("loginInfo")){
				this.loginInfo = uni.getStorageSync("loginInfo")
			}else{
				this.loginInfo = ""
			}
			this.showList = this.shopList.filter(v=>v.loginInfo == this.loginInfo)
			this.getTotal()
		}
	}
</script>

<style lang="less">
	.login{
		.bottomBtn{
			width: 100%;
			height: 100rpx;
			background-color: white;
			border-top: 1rpx solid #efefef;
			display: flex;
			align-items: center;
			position: fixed;
			bottom: 98rpx;
			.totalPrice{
				flex: 3;
				font-size: 38rpx;
				padding-left: 30rpx;
				text{
					color: red;
				}
			}
	}
	
		.quickBuy{
			flex: 2;
			background-color: red;
			color: white;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
	}
	.loginNull{
		padding: 0 30rpx;
		display: flex;
		height: 100rpx;
		justify-content: center;
		align-items: center;
		font-size: 38rpx;
		navigator{
			color: orangered;
			text-decoration: underline;
		}
	}
</style>
